<template>
  <div class="demo">
    <div class="demo-title">选择功能</div>
    <div class="demo-content">
      <Alert :message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`" />
      <Calendar :value="date" @select="onSelect" @panel-change="onPanelChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import dayjs, { Dayjs } from 'dayjs';
  import Alert from '@sscd/alert';
  import Calendar from '@sscd/calendar';
  const date = ref(dayjs('2017-01-25'));
  const selectedValue = ref(dayjs('2017-01-25'));
  const onSelect = (value: string | Dayjs) => {
    date.value = value as Dayjs;
    selectedValue.value = value as Dayjs;
  };
  const onPanelChange = (value: string | Dayjs) => {
    date.value = value as Dayjs;
  };
</script>
